<template>
  <div>
    <van-nav-bar>
      <van-button size="small" icon="search" round slot="title" to='/search'>搜索</van-button>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab :title="v.name" :key="v.id" v-for=" v in channelsList">
        <article-list :channel="v" />
      </van-tab>
      <div class="nav-right-icon"></div>
      <div slot="nav-right" class="nav-right-icon">
        <van-icon @click="isShowChannelEite=true" name="wap-nav" />
      </div>
    </van-tabs>
    <van-popup v-model="isShowChannelEite" position="bottom" closeable close-icon-position="top-left" :style="{ height: '100%' }">
      <channel-eidt v-if="isShowChannelEite " :user-active='active' :user-channel='channelsList' @close='isShowChannelEite=false' @update-active='active=$event' />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user.js'
import { getItem } from '@/utils/storage'
import { mapState } from 'vuex'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
export default {
  name: 'homeIndex',
  components: {
    'article-list': ArticleList,
    'channel-eidt': ChannelEdit
  },
  data() {
    return {
      channelsList: [],
      active: '',
      isShowChannelEite: false
    }
  },
  created() {
    this.loadChannels()
  },
  methods: {
    async loadChannels() {
      let channels = []
      if (this.user) {
        const { data: res } = await getUserChannels()
        channels = res.data.channels
      } else {
        const localChannel = getItem('user-channel')
        if (localChannel) {
          channels = localChannel
        } else {
          const { data: res } = await getUserChannels()
          channels = res.data.channels
        }
      }
      this.channelsList = channels
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>
<style lang="less" scoped>
.van-button {
  width: 200px;
  background-color: #53a8ff;
  color: #ffffff;
  font-size: 14px;
  border: none;
  i {
    font-size: 16px;
    color: #eee;
  }
}
/deep/.van-tabs__line {
  width: 20px;
  background-color: #1989fa;
  bottom: 20px;
}
.van-tabs {
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.nav-right-icon {
  display: flex;
  flex-shrink: 0;
  width: 26px;
  // background-color: violet;
  .van-icon {
    position: fixed;
    right: 0;
    // top: 0px;
    // height: 60px;
    line-height: 40px;
    border-left: 1px solid #eee;
    background-color: rgba(255, 255, 255, 0.9);
  }
}
</style>
